<template>
	<div class="index">
		<Header></Header>
		<!-- 内容 -->
		<!-- 内容 -->
		<div class="conent-top">
			<!-- 面包屑 -->
			<breadcrumb></breadcrumb>
			<div>
				<el-row :gutter="20">
					<el-col :span="6">
						<div><el-button type="primary">个人中心</el-button></div>
						<el-menu :unique-opened="true" collapse-transition :default-active="activeMenu" ref="menuRef" :router="true" class="el-menu-vertical-demo">
							<el-menu-item index="/personal">
								<i class="el-icon-s-custom"></i>
								个人信息
							</el-menu-item>
							<el-submenu index="/dwewe">
								<template slot="title">
									<i class="el-icon-office-building"></i>
									部门管理
								</template>
								<el-submenu @click.native="checkYuan(item.id)" :index="'/1' + item.id" v-for="(item, index) in menuYuanLists" :key="index">
									<template slot="title">
										<el-avatar style="width: 1rem; height: 1rem; margin-right: 0.3rem;" :src="url + item.logo"></el-avatar>
										<span>{{ item.name }}</span>
									</template>
									<el-menu-item
										v-for="(items, index) in item.children"
										:index="items.index + '/department'"
										:route="{ path: '/department', query: { id: items.id } }"
										:key="index"
									>
										<el-avatar style="width: 1rem; height: 1rem; margin-right: 0.3rem;" :src="url + items.logo"></el-avatar>
										{{ items.name }}
									</el-menu-item>
									<div v-if="showRule" style="width: 100%;height: 2rem; line-height: 2rem; cursor: pointer; font-size: 14px;margin-left: 3.5rem;">
										<i class="el-icon-circle-plus-outline" style="color: #2F6BBB;"></i>
										<span style="color: #2F6BBB;" @click="addDepartment(item.id)">添加部门</span>
									</div>
								</el-submenu>
								<el-menu-item v-if="showRules">
									<i class="el-icon-circle-plus-outline" style="color: #2F6BBB;"></i>
									<span style="color: #2F6BBB;" @click="addCourtyard">添加院级单位</span>
								</el-menu-item>
							</el-submenu>
							<el-submenu index="/weiwjr" v-if="noState == 0">
								<template slot="title">
									<i class="el-icon-success"></i>
									审核管理
								</template>
								<el-submenu index="/submit" v-if="showYuan">
									<template slot="title">
										提交员
									</template>
									<el-menu-item  key='1' index="/dxandtj" :route="{ path: '/dxandtj', query: { id: 2 } }">地学产品</el-menu-item>
									<el-menu-item  key='2' index="/dxandtjs" :route="{ path: '/dxandtj', query: { id: 3 } }">图件</el-menu-item>
									<el-menu-item  key='3' index="/personalDataFile" :route="{ path: '/personalDataFile', query: { id: 4 } }">资料档案</el-menu-item>
									<el-menu-item  key='4' index="/auditAdminSubmit" :route="{ path: '/auditAdminSubmit', query: { id: 1 } }">钻孔</el-menu-item>
								</el-submenu>
								<el-submenu index="/auditor" v-else>
									<template slot="title">
										审核员
									</template>
									<el-menu-item key='5' index="/dxcp" :route="{ path: '/auditAdmin', query: { id: 2 } }">地学产品</el-menu-item>
									<el-menu-item key='6' index="/tj" :route="{ path: '/auditAdmin', query: { id: 3 } }">图件</el-menu-item>
									<el-menu-item key='7' index="/zlda" :route="{ path: '/auditAdmin', query: { id: 4 } }">资料档案</el-menu-item>
									<el-menu-item key='8' index="/zk" :route="{ path: '/auditAdmin', query: { id: 1 } }">钻孔</el-menu-item>
								</el-submenu>
								<!-- <el-menu-item v-if="showYuan" index="/auditAdminSubmit">提交员</el-menu-item>
								<el-menu-item v-if="!showYuan" index="/auditAdmin">审核员</el-menu-item> -->
							</el-submenu>

							<el-menu-item index="/feedback">
								<i class="el-icon-s-promotion"></i>
								<span slot="title">意见反馈</span>
							</el-menu-item>
							<!-- <el-menu-item index="/toAuditFlow">
								<i class="el-icon-guide"></i>
								<span slot="title">审核流程</span>
							</el-menu-item> -->
							<!-- <el-submenu index="/guide">
								<template slot="title">
									<i class="el-icon-guide"></i>
									审核流程
								</template>
								<el-menu-item-group>
									<el-menu-item index="/dxcp" :route="{ path: '/toAuditFlow', query: { id: 2 } }">地学产品</el-menu-item>
									<el-menu-item index="/tj" :route="{ path: '/toAuditFlow', query: { id: 3 } }">图件</el-menu-item>
									<el-menu-item index="/zlda" :route="{ path: '/toAuditFlow', query: { id: 4 } }">资料档案</el-menu-item>
									<el-menu-item index="/zk" :route="{ path: '/toAuditFlow', query: { id: 1 } }">钻孔</el-menu-item>
								</el-menu-item-group>
							</el-submenu> -->
						</el-menu>
					</el-col>
					<el-col :span="18"><router-view /></el-col>
				</el-row>
			</div>
		</div>
		<!-- 添加院或部门 -->
		<el-dialog :title="title" :visible.sync="dialogVisible" width="40%" :before-close="handleClose">
			<el-form ref="form" :rules="rulesForm" :model="form" label-width="80px">
				<el-form-item label="头像" prop="image">
					<el-upload
						ref="upload"
						:class="{ uoloadSty: showBtnImg, disUoloadSty: noneBtnImg }"
						action
						accept="image/png,image/gif,image/jpg,image/jpeg"
						list-type="picture-card"
						:file-list="fileLists"
						:auto-upload="false"
						:before-upload="handleBeforeUpload"
						:on-change="handleImgChange"
						:on-remove="handleRemove"
					>
						<i class="el-icon-plus"></i>
					</el-upload>
					<el-dialog :visible.sync="dialogVisibleimg"><img width="100%" :src="dialogImageUrl" alt="" /></el-dialog>
				</el-form-item>
				<el-form-item label="名称" prop="name"><el-input v-model="form.name" style="width: 18rem;" size="small" placeholder="请输入院名称"></el-input></el-form-item>
				<el-form-item label="邮箱" prop="email"><el-input v-model="form.email" style="width: 18rem;" size="small" placeholder="请输入邮箱"></el-input></el-form-item>
				<el-form-item label="手机号" prop="mobile"><el-input v-model="form.mobile" style="width: 18rem;" size="small" placeholder="请输入手机号"></el-input></el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button class="affirm" :loading="loading" @click="affirm('form')">
					<span v-if="!loading">添加</span>
					<span v-else>添加中...</span>
				</el-button>
			</span>
		</el-dialog>

		<!-- 底部 -->
		<Footer></Footer>
	</div>
</template>

<script>
import breadcrumb from '@/components/breadcrumb .vue';
import { getItem } from '@/utils/storage.js';
import { yuanjiList, bumenList, addBumen, addYuan, userRule, auditManagement } from '@/api/user.js';
import { upload } from '@/api/drill.js';
export default {
	name: 'personal',
	components: {
		breadcrumb
	},
	computed: {
		activeMenu() {
			const route = this.$route;
			const { meta, path } = route;
			if (meta.activeMenu) {
				return meta.activeMenu;
			}
			return path;
		}
	},
	data() {
		//电话
		const mobileData = (rule, value, callback) => {
			if (value == null) {
				callback(new Error('请输入手机号'));
			} else if (!/^[1][3,4,5,7,8,9][0-9]{9}$/.test(value)) {
				callback(new Error('请正确的手机号格式'));
			} else {
				callback();
			}
		};
		//邮箱
		const emailData = (rule, value, callback) => {
			if (value == null) {
				callback(new Error('请输入邮箱'));
			} else if (!/^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/.test(value)) {
				callback(new Error('请正确的邮箱格式'));
			} else {
				callback();
			}
		};
		return {
			//添加弹窗
			dialogVisible: false,
			dialogVisibleimg: false,
			dialogImageUrl: '',
			form: {
				image: null,
				pid: null,
				token: getItem('token')
			},
			rulesForm: {
				image: [{ required: true, message: '请选择头像', trigger: 'change' }],
				name: [{ required: true, message: '请填写名称', trigger: 'blur' }],
				email: [{ required: true, validator: emailData, trigger: 'blur' }],
				mobile: [{ required: true, validator: mobileData, trigger: 'blur' }]
			},
			title: '添加院',
			showBtnImg: true,
			noneBtnImg: false,
			fileLists: [],
			//院
			menuYuanList: [],
			menuYuanLists: [],
			//部门
			bumenMenu: [],
			loading: false,
			getCheckYuan: null,
			showRule: false,
			showRules: false,
			showYuan: false,
			noState: 0
		};
	},
	created() {
		//初始化请请求院
		this.getYuanJiList();
		//1添加部门
		this.getUserRule(1);
		//添加院级单位
		this.getUserRule(2);
		let data = {
			token: getItem('token')
		};
		auditManagement(data).then(res => {
			console.log(res);
			// 1
			if (res.data == 1) {
				this.showYuan = true;
			} else if (res.data == 2) {
				this.showYuan = false;
			} else {
				this.noState = 1;
			}
		});
	},
	methods: {
		getUserRule(val) {
			//按钮权限
			userRule(val).then(res => {
				if (res.code == 1001) {
					if (val == 1) {
						this.showRule = true;
					}
					if (val == 2) {
						this.showRules = true;
					}
				}
			});
		},
		getYuanJiList() {
			yuanjiList({ token: getItem('token') }).then(res => {
				this.menuYuanList = res.data;
				this.menuYuanList.map(value => {
					//统一处理返回数据结构处理成子集格式
					this.getdepartment(value.id);
				});
				this.$nextTick(() => {
					this.menuYuanLists = this.menuYuanList;
				});
			});
		},
		//处理添加后还保持在当期选中项
		checkYuan(val) {
			this.getCheckYuan = val;
		},
		//获取部门
		getdepartment(value) {
			let data = {
				token: getItem('token'),
				id: value
			};
			bumenList(data).then(res => {
				this.menuYuanList.map((val, i) => {
					if (val.id == value) {
						this.$set(this.menuYuanList[i], 'children', res.data);
					}
				});
			});
		},
		//关闭弹窗
		handleClose() {
			this.dialogVisible = false;
			this.form.pid = null;
			this.form = {
				token: getItem('token')
			};
			this.fileLists = [];
			this.noneBtnImg = false;
		},
		// 上传文件之前的钩子
		handleBeforeUpload(file) {
			if (!(file.type === 'image/png' || file.type === 'image/gif' || file.type === 'image/jpg' || file.type === 'image/jpeg')) {
				this.$notify.warning({
					title: '警告',
					message: '请上传格式为image/png, image/gif, image/jpg, image/jpeg的图片'
				});
			}
			let size = file.size / 1024 / 1024 / 2;
			if (size > 2) {
				this.$notify.warning({
					title: '警告',
					message: '图片大小必须小于2M'
				});
			}
		},
		//选择文件变化
		handleImgChange(e, flies) {
			let formData = new FormData();
			formData.append('file', e.raw);
			upload(formData).then(res => {
				this.form.image = res.data;
			});
			this.noneBtnImg = flies.length >= 1;
			this.fileLists = flies;
		},
		// 文件列表移除文件时的钩子
		handleRemove(file, fileList) {
			this.form.image = null;
			this.noneBtnImg = fileList.length >= 1;
		},
		addDepartment(val) {
			this.dialogVisible = true;
			this.form.pid = val;
			this.title = '添加部门';
		},
		addCourtyard() {
			this.dialogVisible = true;
			this.title = '添加院';
		},
		affirm(formName) {
			this.$refs[formName].validate(valid => {
				if (valid) {
					//添加院
					if (this.form.pid == null) {
						this.loading = true;
						addYuan(this.form).then(res => {
							if (res.code == 1001) {
								this.loading = false;
								this.handleClose();
								this.msgSuccess(res.msg);
								this.getYuanJiList();
							}
						});
					} else {
						//添加部门
						this.loading = true;
						addBumen(this.form).then(res => {
							if (res.code == 1001) {
								this.loading = false;
								this.handleClose();
								this.msgSuccess(res.msg);
								this.getdepartment(this.getCheckYuan);
							}
						});
					}
				} else {
					return false;
				}
			});
		}
	}
};
</script>
<style scoped lang="scss">
.conent-top {
	width: 65%;
	height: 65rem;
	margin: auto;
	/deep/.el-button {
		width: 100%;
		height: 3rem;
		border-radius: 8px 8px 0 0;
		background-color: #146ac1;
		font-size: 1rem;
	}
	.el-menu-vertical-demo {
		height: 57.35rem;
		overflow-y: auto;
		border-radius: 0 0 8px 8px;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
	}
	// .el-menu-item.is-active{
	// 	color: #FFFFFF;
	// }
	.el-menu-item:hover {
		background-color: #92c0f1;
		color: #ffffff;
	}
}
/deep/.el-dialog__header {
	background-color: #2f6bbb;
	.el-dialog__title {
		color: #ffffff;
	}
	.el-icon-close {
		color: #ffffff;
	}
}
.affirm {
	background-color: #146ac1;
	color: #ffffff;
}
/deep/.disUoloadSty .el-upload--picture-card {
	display: none; /* 上传按钮隐藏 */
}
</style>
